<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>租房网大屏项目</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <header>
        <h1>租房大数据可视化平台</h1>
        <div class="date">
            <h2 id="timeDom">15:52:33</h2>
            <div>
                <p id="dateDom">2023年10月17号</p>
                <p id="dayDom">星期二</p>
            </div>
        </div>
    </header>
    <main>
        <div class="item">
            <h3>租金构成占比（元）</h3>
            <div id="charDom1"></div>
            <span class="jiao1"></span>
            <span class="jiao2"></span>
        </div>
        <div class="item">
            <h3>资源总量统计</h3>
            <ul class="item-data">
                <li>
                    <span>15681</span>
                    <p>总房源数</p>
                </li>
                <li>
                    <span>1731</span>
                    <p>总用户数</p>
                </li>
                <li>
                    <span>11753</span>
                    <p>总成交量</p>
                </li>
            </ul>
            <div id="charDom2" class="lineChar"></div>
            <span class="jiao1"></span>
            <span class="jiao2"></span>
        </div>
        <div class="item">
            <h3>户型构成占比</h3>
            <div id="charDom3"></div>
            <span class="jiao1"></span>
            <span class="jiao2"></span>
        </div>
        <div class="item">
            <h3>最新发布房源</h3>
            <div class="pl20">
                <!-- 
                    播放动画思路：
                        css - overflow:hidden;
                    定时器：setIntaval(fun,5000)
                    jq - animate，margin-top
                        css("")
                    appendChild()上面的元素，循环到下面来！

                    swiper
                -->
                <table cellspacing="0">
                    <thead >
                        <tr>
                            <th>标题</th>
                            <th>价格</th>
                            <th>地址</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>低价出租公寓房</td>
                            <td>2100元/月</td>
                            <td>开封</td>
                        </tr>
                        <tr>
                            <td>坐北朝南，100多平，找房的看过来！</td>
                            <td>2100元/月</td>
                            <td>开封</td>
                            <!-- <td></td>
                            <td>房源大甩卖！</td> -->
                        </tr>
                        <tr>
                            <td>房源大甩卖！</td>
                            <td>2100元/月</td>
                            <td>开封</td>
                        </tr>
                        <tr>
                            <td>低价出租公寓房</td>
                            <td>2100元/月</td>
                            <td>开封</td>
                        </tr>
                        <tr>
                            <td>坐北朝南，100多平，找房的看过来！</td>
                            <td>2100元/月</td>
                            <td>开封</td>
                            <!-- <td></td>
                            <td>房源大甩卖！</td> -->
                        </tr>
                        <tr>
                            <td>房源大甩卖！</td>
                            <td>2100元/月</td>
                            <td>开封</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <span class="jiao1"></span>
            <span class="jiao2"></span>
        </div>
        <div class="item">
            <h3>最新成交房源</h3>
            <div></div>
            <span class="jiao1"></span>
            <span class="jiao2"></span>
        </div>
        <div class="item">
            <h3>国内房源分布</h3>
            <div id="charDom4"></div>
            <span class="jiao1"></span>
            <span class="jiao2"></span>
        </div>
        <div class="item item2">
            <h3>楼层分布</h3>
            <div id="charDom5"></div>
            <span class="jiao1"></span>
            <span class="jiao2"></span>
        </div>
        <div class="item item2">
            <h3>看房类型</h3>
            <div id="charDom6"></div>
            <span class="jiao1"></span>
            <span class="jiao2"></span>
        </div>
    </main>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/china.js"></script>
    <script src="./js/china-map.js"></script>
    <script src="./js/index.js"></script>
</body>
</html>